<template>
     <view class="">
        <view class="">
        交易明细
     </view>
      <view class="list">
      <view class="item flex"  v-for="(item,index) in list " :key="index">
        <view class="img"> </view>
        <view class="infos">
          <view class="user"> 你 </view>
          <view class="attr cc"> 2022/22/22 11:11:11</view>
          <view class="title"> 打赏了房源 091029</view>
        </view>
        <view class="icons center"> +8.55 </view>
      </view>
    </view>
     </view>
</template>

<script>
export default {
  data() {
    return {
        list: new Array(20).fill(0)
    }
  },
  mounted(){
    
  },
  methods:{
    handleScroll(){   
      let arr = new Array(20).fill(0);
      this.list = this.list.concat(arr)   
    }
  }
}
</script>

<style>

.account { color: #000; height: 100%; }
.account-top{ background: #FFD851; }
.total {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 300px;
  color: #fff;
}
.list-head {
  background: #ccc;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: 600;
}
.img {
  width: 60px;
  height: 60px;
  background: url(https://unsplash.it/600/300?random) center center / 100% 100%;
  margin-right: 20px;
  border-radius: 50%;
  margin: 10px;
}

.item { align-items: flex-start; }
.user { font-size: 18px; font-weight: 600; }
.infos { flex: 1; }
.icons { padding: 40px 20px 0 20px; font-size: 18px; font-weight: 600; color: #ffd851; }
.list{ flex: 1; overflow: auto; }
</style>